<template>
  <div class="app-container">
    <!-- 搜索工具栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
      <el-form-item label="线索名称" prop="search">
        <el-input v-model="queryParams.search" placeholder="请输入线索名称"
                  clearable style="width: 240px" @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格工具栏 -->
    <table-tool
      :multiple.sync="multiple"
      :single.sync="single"
      @add="handleAdd"
      @update="handleUpdate"
      @delete="handleDelete"
      @import="handleImport"
      @export="handleExport"
      @select-export="handleSelectExport"
      @list="getList"
    ></table-tool>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :max-height="windowHeight" v-loading="tableLoading"
              @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column show-overflow-tooltip fixed align="center" prop="leadsName" label="线索名称" min-width="155">
        <template slot-scope="scope">
          <el-button type="text" @click="rowClick(scope.row)">{{ scope.row.leadsName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="sourceName" label="线索来源" min-width="135">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.crm_source_name" :value="scope.row.sourceId"/>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="mobile" label="手机" min-width="155"/>
      <el-table-column show-overflow-tooltip align="center" prop="telephone" label="电话" min-width="155"/>
      <el-table-column show-overflow-tooltip align="center" prop="email" label="邮箱" min-width="175"/>
      <el-table-column show-overflow-tooltip align="center" prop="address" label="地址" min-width="175"/>
      <el-table-column show-overflow-tooltip align="center" prop="industryId" label="客户行业" min-width="95">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.crm_customer_industry" :value="scope.row.industryId"/>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="levelName" label="客户级别" min-width="95">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.crm_customer_level" :value="scope.row.levelId"/>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="nextTime" label="下次联系时间" min-width="155"/>
      <el-table-column show-overflow-tooltip align="center" prop="remark" label="备注" min-width="175"/>
      <el-table-column show-overflow-tooltip align="center" prop="lastTime" label="最后跟进时间" min-width="155"/>
      <el-table-column show-overflow-tooltip align="center" prop="lastContent" label="最后跟进记录" min-width="175"/>
      <el-table-column show-overflow-tooltip align="center" prop="ownerUserName" label="负责人" min-width="135"/>
      <!--      <el-table-column show-overflow-tooltip align="center" prop="post" label="所属部门" min-width="115"/>-->
      <el-table-column show-overflow-tooltip align="center" prop="updateTime" label="更新时间" min-width="155"/>
      <el-table-column show-overflow-tooltip align="center" prop="createTime" label="创建时间" min-width="155"/>
      <el-table-column show-overflow-tooltip align="center" prop="createUserName" label="创建人" min-width="135"/>
    </el-table>
    <!-- 分页条 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page-sizes="[15,30,50,100]"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="getList"
    />
    <!-- 懒加载对话框 -->
    <leads-dialog :visible.sync="dialogVisible" @ok="getList" :pk="pk"/>
    <!-- 懒加载抽屉 -->
    <leads-detail :visible.sync="drawerVisible" @ok="getList" :pk="pk"/>
  </div>
</template>

<script>
import {
  deleteBatchByIds,
  listByParamsForTable
} from '@/api/crm/Leads'

import LeadsDialog from './Create'
import LeadsDetail from './Detail'
import TableTool from '@/components/Crm/TableTool/Index'

export default {
  name: 'LeadsIndex',
  dicts: ['crm_source_name', 'crm_customer_industry', 'crm_customer_level'],
  components: { LeadsDetail, LeadsDialog, TableTool },
  props: {},
  data() {
    return {
      tableData: [], // 表格数据
      pk: null,
      tableLoading: false, // 表格加载动画
      // 查询参数
      queryParams: {
        page: 1,
        limit: 15,
        search: ''
      },
      total: 0, // 总记录数
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      ids: [], // 选中id集合
      dialogVisible: false, // 对话框懒加载
      drawerVisible: false, // 抽屉懒加载
      windowHeight: document.documentElement.clientHeight - 265 // 自适应高度
    }
  },
  // 在实例创建完成后被立即调用
  created() {
    // 查询数据
    this.getList()
  },
  // 实例被挂在后调用
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        this.windowHeight = window.fullHeight - 265
      })()
    }
  },
  // 方法
  methods: {
    // 查询数据
    getList() {
      this.tableLoading = true
      listByParamsForTable(this.queryParams).then(res => {
        this.tableData = res.data.records
        this.total = res.data.totalCount
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
      })
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 重置
    resetQuery() {
      this.reset()
      this.getList()
    },
    // 清空
    reset() {
      this.queryParams = {
        page: 1,
        limit: 15,
        search: ''
      }
    },
    // 新增
    handleAdd() {
      this.pk = null
      this.dialogVisible = true
    },
    // 修改
    handleUpdate() {
      this.pk = this.ids[0]
      this.dialogVisible = true
    },
    // 删除
    handleDelete() {
      const ids = this.ids
      this.$modal.confirm('确认删除所选中数据?').then(function() {
        return deleteBatchByIds(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    // 导入
    handleImport() {

    },
    // 导出
    handleExport() {

    },
    // 选择性导出
    handleSelectExport() {

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 表格单元格点击事件
    rowClick(row) {
      this.pk = row.id
      this.drawerVisible = true
    }
  }
}
</script>

<style scoped>

</style>
